<template>
    <a-spin :spinning="loadingState">
      <div class="number_chart" ref="number_chart">
        <div class="message">
          <div class="number-content">
            <span class="count" v-if="chartsItem && item.display.animated">
              <countTo :startVal='0' :endVal='currentGoods' :duration='1000'></countTo>
            </span>
            <span class="count" v-else>
              {{ currentGoods }}
            </span>
            <span class="unit">{{ chartsItem && item.display.unit }}</span>
          </div>
        </div>
      </div>
    </a-spin>
</template>

<script>
import { mapState } from 'vuex'
import countTo from 'vue-count-to'
  export default {
    props: {
      item: {
        type: Object
      },
      dataApkdb: {
        type: Object
      },
      rowHeight: {
        type: Number
      },
      chartsItem: {
        type: Array
      },
      loadingState: {
        type: Boolean
      }
    },
    data() {
      return {
        view_width: 200,
        view_height: 150,
        currentGoods: 0,
        numberContent: null
      }
    },
    components: {
      countTo
    },
    watch: {},
    computed: {
      ...mapState('charts', ['chartList']),
    },
    mounted() {
      this.$nextTick(()=>{
        this.initNumber()
      })
    },
    methods: {
      wait_data () {
        let datasetId = this.item.dataMapping.datasetId,
            value = this.item.dataMapping.value
        if (this.dataApkdb[datasetId]) {
          let oneVal = this.dataApkdb[datasetId].filter((item,index)=>{
            if(index == 0) return item
          })
          if (oneVal.length > 0) {
              this.currentGoods = oneVal[0][value]*1
          }
        }
      },
      initNumber () {
        this.view_width = this.$refs.number_chart && this.$refs.number_chart.clientWidth
        if (this.view_width >= 300) {
          this.$refs.number_chart.style.fontSize = '50px'
        }
        if (this.view_width < 300) {
          this.$refs.number_chart.style.fontSize = '30px'
        }
        this.wait_data()
      }
    },
  }
</script>

<style scoped>
.number_chart {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.message {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 18px;
  line-height: 28px;
  color: #666;
}

.remark {
  font-size: 14px;
  color: #999;
  line-height: 24px;
}

.count {
  /* font-size: 30px; */
  font-weight: 600;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unit {
  font-size: 18px;
  color: #555;
  align-self: flex-end;
}

.number-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.number-content .unit {
  position: absolute;
  bottom: 5%;
  right: 5%;
}

.ant-spin-nested-loading {
  height: 100%;
}

.ant-spin-nested-loading>>>.ant-spin-container {
  height: 100%;
}
</style>